<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/component/commonTagLib.jsp" %>

<!DOCTYPE html>
<html>
<head>
    <title>子用户管理</title>
    <%@ include file="/WEB-INF/component/commonCSS.jsp" %>
    <link href="${ctx}/lib/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <style type="text/css">
        div.box-body {
    		margin-top:7px;
    	}
    	table.privilegeTable {
    		width: 100%;
    		border-collapse: collapse;
    		border: 1px solid #ccc;
    		border-top: 0px none;
    	}
    	div.ztreePanel {
    		max-height: 450px;
    		min-height: 390px;
    		overflow: auto;
    	}
    	div.ztree {
    		margin: 20px;
    	}
    	.leftTd {
    		vertical-align: top;
    	}
    	.rightTd {
    		width: 50%;
    		height: 100%;
    		vertical-align: top;
    		border-left: 1px solid #ccc;
    	}
    	
    	div.rightTitleDiv {
    		font-size: 20px;
    		margin: 10px 0px 20px 0px;
    		padding: 10px 20px;
    		border-bottom: 1px solid #ccc;
    	}
    	
    	div.rightTextDiv {
    		margin: 10px 0px;
    		padding: 5px 20px;
    	}
    	div#extraTitle {
    		margin-top: 5px;
    		height: 24px;
    		line-height: 24px;
    		cursor: pointer;
    		padding-left: 15px;
    		border: 1px solid #ccc;
    		background-color: #eee;
    	}
    	div#extraPrivilege {
    		display: none;
    	}
    	span.required {
    		color: red;
    		margin-right: 6px;
    	}
    </style>
</head>
<body class="skin-blue sidebar-mini fixed skin-blue-light-frame">
    <section class="content-header">
        <h1>${(opType==0)?"子用户管理新增":"子用户管理编辑"}</h1>
        <ol class="breadcrumb">
            <li><a href="${ctx}/home.jsp"><i class="fa fa-home"></i>首页</a></li>
            <li class="active"><a href="${ctx }/sysUser/subUserList.html">子用户管理</a></li>
            <li class="active"><a href="#">${(opType==0)?"子用户管理新增":"子用户管理编辑"}</a></li>
        </ol>
    </section>
    <section class="content">
       <form id="form" class="form-horizontal" action="subSaveUser.html" method="post">
            	<input type="hidden" name="id" value="${user.id}" />
            	<input type="hidden" name="opType" value="${opType}" />
            	<input type="hidden" name="locked" value="0" />
            	<input type="hidden" id="privileges" name="privileges" />
            	<input type="hidden" name="type" value="${user.type}" />
        <div class=" box box-success ">
              <div class="box-body">
                    <div class="form-group form-group-xs">
                        <label for="username" class="col-sm-2 text-right"><span class="required">*</span>用户帐号：</label>
                        <div class="col-sm-3 text-left">
                            <input class="form-control" id="username" name="username" value="${user.username}" placeholder="用户帐号" type="text" readonly="readonly">
                        </div>
                        <label for="name" class="col-sm-3 text-right"><span class="required">*</span>用户名称：</label>
                        <div class="col-sm-3 text-left">
                            <input class="form-control" id="name" name="name" value="${user.name}" placeholder="用户名称" type="text">
                        </div>
                    </div>
                    <div class="form-group form-group-xs">
                        <label for="roleId" class="col-sm-2 text-right"><span class="required">*</span>用户角色：</label>
                        <div class="col-sm-3 text-left">
                            <select class="form-control" id="roleId" name="role.id">
                            	<c:if test="${ roleList != null }">
                            		<c:forEach items="${ roleList }" var="role">
                            			<option value="${ role.id }" ${user.role.id == role.id ? "selected='true'" : ""}>${ role.name }</option>
                            		</c:forEach>
                            	</c:if>
                            </select>
                        </div>
                        <label for="email" class="col-sm-3 text-right"><span class="required">*</span>用户邮箱：</label>
                        <div class="col-sm-3 text-left">
                            <input class="form-control" id="email" name="email" value="${user.email}" placeholder="用户邮箱" type="text">
                        </div>
                    </div>
                    <div class="form-group form-group-xs">
                        <label for="phone" class="col-sm-2 text-right"><span class="required">*</span>联系电话：</label>
                        <div class="col-sm-3 text-left">
                            <input class="form-control" id="phone" name="phone" value="${user.phone}" placeholder="联系电话" type="text" maxlength="20">
                        </div>
                        <label for="status" class="col-sm-3 text-right"><span class="required">*</span>用户状态：</label>
                        <div class="col-sm-3 text-left">
                            <select class="form-control" id="status" name="status">
                            	<option value="1" ${user.status == 1 ? "selected='true'" : ""}>启用</option>
                            	<option value="0" ${user.status == 0 ? "selected='true'" : ""}>停用</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group form-group-xs">
                        <label for="remark" class="col-sm-2 control-label">备注：</label>
                        <div class="col-sm-9">
                            <textarea class="form-control" id="remark" name="remark" rows="3" placeholder="备注" maxlength="500">${user.remark}</textarea>
                        </div>
                    </div>
                    <%-- 
                    <div class="form-group form-group-xs">
                    	<label class="col-sm-2 control-label">附加权限：</label>
                        <div class="col-sm-10">
                        	<div id="extraTitle">添加特殊权限</div>
                        	<div id="extraPrivilege">
		                    	<table class="privilegeTable">
					    			<tr>
					    				<td class="leftTd">
					    					<div class="ztreePanel">
					    						<div id="ztree" class="ztree"></div>
					    					</div>
					    				</td>
					    				<td class="rightTd">
					    					<div class="rightTitleDiv">权限详情</div>
											<div class="rightTextDiv">权限名称：<span id="nameSpan"></span></div>
											<div class="rightTextDiv">菜单名称：<span id="menuNameSpan"></span></div>
											<div class="rightTextDiv">权限类型：<span id="typeSpan"></span></div>
											<div class="rightTextDiv">权限链接：<span id="urlSpan"></span></div>
											<div class="rightTextDiv">权限图标：<span id="iconSpan"></span></div>
											<div class="rightTextDiv">权限状态：<span id="statusSpan"></span></div>
											<div class="rightTextDiv">权限顺序：<span id="sortSpan"></span></div>
											<div class="rightTextDiv">权限备注：<span id="remarkSpan"></span></div>
					    				</td>
					    			</tr>
					    		</table>
				    		</div>
			    		</div>
                    </div>
                    --%>
                </div>
                <div class="box-footer text-center">
                    <button type="button" class="btn btn-success btn-sm" onclick="subSaveUser();">保&nbsp;存</button>
                    <a href="${ctx }/sysUser/subUserList.html" class="btn btn-danger btn-sm">返&nbsp;回</a>
                </div>
                </div> 
            </form>
    </section>
    
    <%@ include file="/WEB-INF/component/commonJS.jsp" %>
    <script src="${ctx}/lib/plugins/zTree_v3/js/jquery.ztree.all-3.5.min.js"></script>
    
    <script type="text/javascript">
    	var treeObj = null;
    
    	//	获取选中的权限
    	function getCheckedPrivilege() {
    		if (treeObj != null) {
    			var nodes = treeObj.getCheckedNodes(true) || [];
    			if (nodes.length > 0) {
    				var params = [];
    				for (var i=0; i<nodes.length; i++) {
        				var node = nodes[i] || {};
        				params.push({"id":node.id});
        			}
    				$("#privileges").val(json.jsonToString(params));
    			}
    		}
    	}
    
    	//	保存用户信息
    	function subSaveUser() {
    		if (!validate()) {
    			return;
    		}
    		getCheckedPrivilege();
    		$("#form").ajaxSubmit({
    			dataType : "json",
    			timeout: 10000,
    			success : function(result, statusText) {
    				if (result.success) {
    					if ("${opType}" == "0") {
    						var pwd = result.rows || "";
    						$.HN.message.alert("保存成功！<br/>帐号：${user.username}<br/>密码：" + pwd, "消息", "success", function() {
        						document.location = "${ctx }/sysUser/subUserList.html";
        					});
    					} else {
    						$.HN.message.alert("保存成功！", "消息", "success", function() {
        						document.location = "${ctx }/sysUser/subUserList.html";
        					});
    					}
    				} else {
    					$.HN.message.alert(result.msg || "", "消息", "error");
    				}
    			}
    		});
    	}
    	
    	//	校验用户信息
    	function validate() {
    		var name = $.trim($("#name").val());
    		if (name == null || name == "") {
    			$.HN.message.alert("请输入用户名称！", "消息", "warn");
    			return false;
    		}
    		
    		var email = $.trim($("#email").val());
    		if (email == null || email == "") {
    			$.HN.message.alert("请输入电子邮箱！", "消息", "warn");
    			return false;
    		} else if (!/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(email)) {
    			$.HN.message.alert("电子邮箱格式不正确！", "消息", "warn");
    			return false;
    		}
    		
    		var roleId = $.trim($("#roleId").val());
    		if (roleId == null || roleId == "") {
    			$.HN.message.alert("请选择用户角色！", "消息", "warn");
    			return false;
    		}
    		
    		var phone = $.trim($("#phone").val());
    		if (phone == null || phone == "") {
    			$.HN.message.alert("请输入联系电话！", "消息", "warn");
    			return false;
    		}
    		
    		var status = $.trim($("#status").val());
    		if (status == null || status == "") {
    			$.HN.message.alert("请选择用户状态！", "消息", "warn");
    			return false;
    		}
    		
    		return true;
    	}
    
    	$(document).ready(function() {
    		var setting = {
    			treeNodeKey: "id",         //设置节点唯一标识属性名称
   				check: {
   					enable: true
   				},
   				view: {
   					selectedMulti: false
   				},
   				data: {
   					key: {
   						url: "#",
   						icon: "#"
   					},
   					simpleData: {
   						enable: true
   					}
   				},
   				callback: {
   					onClick: function(event, treeId, treeNode) {
   						$("#nameSpan").html(treeNode.name || "");
   						$("#menuNameSpan").html(treeNode.menuName || "");
   						$("#typeSpan").html(treeNode.typeName || "");
   						$("#urlSpan").html(treeNode.url || "");
   						$("#iconSpan").removeAttr("class").addClass(treeNode.icon || "");
   						$("#statusSpan").html(treeNode.statusName || "");
   						$("#sortSpan").html(treeNode.sort || "0");
   						$("#remarkSpan").html(treeNode.remark || "");
   					}
   				}
   			};
    		
    		$("div#extraTitle").click(function() {
    			if ($("div#extraPrivilege").is(":visible")) {
    				$("div#extraPrivilege").slideUp();
    			} else {
    				$("div#extraPrivilege").slideDown();
    			}
    		});
    		
			// 查询权限列表
    		function getPrivilegeList(roleId) {
    			$.post("${ctx}/sysPrivilege/getExtraPrivilegeList.html", {
    				userId : "${user.id}",
    				roleId : (roleId || "")
    			}, function(list) {
    				treeObj = $.fn.zTree.init($("#ztree"), setting, (list || []));
    				//treeObj.expandAll(true);
    			}, "json").error(function(err) {
        			top.window.document.location = "${ctx}/login.html"; 
        		});
    		}
			
    		$("#roleId").change(function() {
				getPrivilegeList($(this).val());
			});
			
			// $("#roleId").change();
    	});
    </script>
    
</body>
</html>
